<template>
	<view class="my-comment">
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="blog-news-comments"
			orderby="comment_date desc" @load="handleLoad" where="user_id == $cloudEnv_uid && comment_type == 0">
			<view v-if="error">{{ error.errMsg }}</view>
			<view v-if="loading">
				<u-skeleton rows="27" title loading>
				</u-skeleton>
			</view>
			<view v-if="data.length">
				<uni-list>
					<uni-list-item v-for="(item,index) in data" :key="index" :title="item.comment_content"
						:note="(new Date(item.comment_date)).toLocaleString()" @click="handleItemClick(item)" clickable>
						<template #footer>
							<text class="iconfont icon-shanchu" style="color: #e86262;"
								@click.stop="onRemove(item)"></text>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view v-else>
				<view class="none">
					<image src="../../static/images/nodata.png" mode="aspectFit"></image>
				</view>
			</view>
		</unicloud-db>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const udb = ref()

	const db = uniCloud.database()

	const handleLoad = (data) => {
		console.log(data);
	}

	const handleItemClick = (item) => {
		uni.navigateTo({
			url: `../../pages/detail/detail?id=${item.article_id}`
		})
	}

	const onRemove = (item) => {
		udb.value?.remove(item._id, {
			confirmContent: '是否要删除评论',
			success: () => {
				db.collection('blog-news-comments').where(
						`comment_type == 1 && reply_comment_id == '${item._id}' && user_id == $cloudEnv_uid`)
					.remove().then(res => {
						if (res.result) {
							uni.showToast({
								title: '删除成功!',
								icon: 'none'
							})
						}
					})
			}
		})
	}
</script>

<style scoped lang="scss">
	.my-comment {
		.iconfont {
			font-size: 45rpx;
			padding: 0 10rpx;
		}

		.none {
			display: flex;

			image {
				margin: auto;
			}
		}
	}
</style>